<!-- 维修待办 -->
<template>
	<view>
		<view class="no-warpper" v-if="isLong">
			<view v-if="hasInfo">
				<view class="scroll-box">
					<view class="nl-shadow-box card-box" v-for="(item,index) in repairList" :key="index">
						<view class="nl-flex-list title">
							<view>{{item.repairId}}</view>
							<text :class="item.state == '1100' ? 'blue' : (item.state == '1200' ? 'yellow':'red')">{{item.stateName}}</text>
						</view>
						<view class="nl-flex-list">
							<view class="content" @click="repairDetail(item)">
								
								<view class="item">
									<view>报修类型</view>
									<text>：</text>
									<view>{{item.repairTypeName}}</view>
								</view>
								<view class="item">
									<view>报修人</view>
									<text>：</text>
									<view>{{item.repairName}}</view>
								</view>
								<view class="item">
									<view>联系方式</view>
									<text>：</text>
									<view>{{item.tel}}</view>
								</view>
								<view class="item">
									<view>报修位置</view>
									<text>：</text>
									<view>{{item.repairObjName}}</view>
								</view>
								<view class="item">
									<view>预约时间</view>
									<text>：</text>
									<view>{{item.appointmentTime}}</view>
								</view>
								<view class="item">
									<view>报修内容</view>
									<text>：</text>
									<view>{{item.context}}</view>
								</view>
							</view>
						</view>
						<view class="botton-flex">
							<view class="button-mini line m8" @click="repairDetail(item)">
								<button>详情</button>
							</view>
							<view class="button-mini yellow m8"
								v-if="item.state == '1100' || item.state == '1200' ||item.state == '1300'"
								@click="dealRepair(item,'TRANSFER')">
								<button>转单</button>
							</view>
							<view class="button-mini red m8" v-if="item.preStaffId != '-1'"
								@click="dealRepair(item,'BACK')">
								<button>退单</button>
							</view>
							<view class="button-mini main m8"
								v-if="item.state == '1100' || item.state == '1200' ||item.state == '1300'"
								@click="dealRepair(item,'FINISH')">
								<button>办结</button>
							</view>
							<view class="button-mini main m8" v-if="item.state == '1700'" @click="dealAppraise(item)">
								<button>完成</button>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</view>
			<!-- 无数据 渲染缺省图 -->
			<view v-if="hasInfo == false">
				<noData :noDataText="noDataText"></noData>
			</view>
		</view>

		<view v-else>
			<netError v-if="!hasNet" @refresh="refresh()"></netError>
		</view>
	</view>

</template>

<script>
	import {
		getRepairs
	} from 'api/repair';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				dataList: [],  //处理下拉加载变空值
				repairList: [],
				page: 1,
				records: 0,
				status: 'loadmore',

				isLong: false, // 是否加载完成
				hasNet: true, // 是否有网络
				hasInfo: '', // 是否有数据
				noDataText: '暂无数据~',
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		onLoad() {
			this.page = 1
			this.records = 0
			this.dataList = []
			this.getRepairs(1)
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.records = 0
			this.dataList = []
			this.getRepairs(1)
		},
		/**
		 * 上拉加载
		 */
		onReachBottom() {
			console.log('触底加载')
			if (this.status == 'loading') { // 防止多次触发

			} else {
				this.status = 'loading';
				if (this.page <= this.records) {
					this.getRepairs(this.page)
				} else {
					this.status = 'nomore';
				}
			}
		},
		methods: {
			/**
			 * 获取维修待办列表
			 */
			getRepairs(page) {
				var that = this
				const data = {
					userId: this.userInfo.userId,
					communityId: this.userCommunity.communityId,
					page: page,
					row: 10
				}
				getRepairs(data).then((res) => {
					console.log('获取维修待办', res)
					if (res.code == 0) {
						if (res.records == 0) { //暂无数据
							that.hasInfo = false
							that.isLong = true;
							uni.hideLoading()
							uni.stopPullDownRefresh()
							return;
						}
						that.records = res.records
						if (that.records == that.page) {
							that.status = 'nomore';
						}
						that.page++
						uni.stopPullDownRefresh()
						for (let i of res.data) {
							that.dataList.push(i)
						}
						that.repairList = that.dataList
						that.isLong = true
						that.hasInfo = true
					}
				}).catch(function(reason) {
					uni.stopPullDownRefresh()
					// 处理网络错误
					that.hasNet = false
					that.isLong = false
				})
			},
			/**
			 * 跳转工单处理页面
			 */
			dealRepair(item, action) {
				uni.navigateTo({
					url: '/pages/home/repairOrder/orderHandle/orderHandle?action=' +
						action + "&repairId=" + item.repairId +
						"&repairType=" + item.repairType +
						"&preStaffId=" + item.preStaffId +
						"&preStaffName=" + item.preStaffName +
						"&repairObjType=" + item.repairObjType
				})
			},
			/**
			 * 跳转工单详情
			 */
			repairDetail(item) {
				uni.navigateTo({
					url: `/pages/home/repairWaiting/repairDetails/repairDetails?repairId=${item.repairId}`
				});
			},
			/**
			 * 跳转工单评价页面  工单完成
			 */
			dealAppraise(item) {
				uni.navigateTo({
					url: `/pages/home/repairWaiting/orderEvaluation/orderEvaluation?repairId=${item.repairId}`
				})
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.page = 1
				this.records = 0
				this.repairList = []
				this.getRepairs(1)
			}
		}
	}
</script>

<style lang="scss">
	.scroll-box {
		width: 100%;
		padding-bottom: 64rpx;
	}
</style>
